<template>
  <div class="flex flex-1">
    <Uploade :isPreview="true" @onChangeFile="onChangeFile" ref="uploadeRef">
      <div class="tip" v-if="!imageSrc">请上传图片</div>
      <img v-else class="avatar" :src="imageSrc" />
    </Uploade>
    <div class="flex flex-column justify-center ml-1">
      <el-button size="mini" type="primary" @click="isCropper = true">
        裁剪图片
      </el-button>
      <el-button class="mt-1 ml-0" size="mini" type="primary" @click="triggerInputFile">
        更换图片
      </el-button>
    </div>
    <Cropper @onChangeFile="onChangeFile" v-model="isCropper" :baseImageUrl="imageSrc">
    </Cropper>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Uploade from "@/components/Uploade/index.vue";
import Cropper from "@/components/Cropper/index.vue";

export default defineComponent({
  components: {
    Uploade,
    Cropper,
  },
  props: {
    imageSrc: {
      type: String,
    },
  },
  setup(props, context) {
    // 控制图片裁剪
    let isCropper = ref(false);
    let uploadeRef = ref<any>(null);
    let onChangeFile = (imageSrc: string) => {
      context.emit("onChangeImage", imageSrc);
    };

    let triggerInputFile = () => {
      uploadeRef.value.triggerUpload();
    };

    return {
      triggerInputFile,
      uploadeRef,
      isCropper,
      onChangeFile,
    };
  },
});
</script>

<style lang="scss" scoped>
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
.tip {
  font-weight: bold;
  font-size: 18px;
  color: #ccc;
  height: 130px;
  line-height: 130px;
}
.tip:hover {
  color: #409eff;
}
</style>
